<!--
 * @FileDescription:
 * @Author: cjw
 * @Date: 2022/2/7 17:11
 -->
<template>
<div>
  <div class="left-content">
    <el-calendar v-model="value">
    </el-calendar>
  </div>
  <div class="right-content">
    <List  border size="large">
      <template slot="header">
        <h2>个人计划</h2>
      </template>
      <ListItem v-for="item in plans">
        <div @click="detailPlan(item.id)">{{item.content.substr(0,10)}}</div>
        <i @click="cancelPlan(item.id)" class="el-icon-delete"></i>
      </ListItem>
    </List>
  </div>
  <el-dialog
    title="计划详情"
    :visible.sync="visible"
    :destroy-on-close="close_modal_destroy"
    :close-on-click-modal="close_modal"
    @close="handleCancel"
    width="700px"
  >
    <DetailPlan :id="planId" :info="info"></DetailPlan>
  </el-dialog>
</div>
</template>

<script>

import {cancelPlan, findPlan, getMyPlanByTime} from "@/api/plan";
import moment from "moment"
import DetailPlan from "@/components/lifesquare/detailPlan";
import {sendMatomo} from "@/api/matomo";

export default {
  name: "myPlan",
  components: {DetailPlan},
  data() {
    return {
      value: new Date(),
      plans : [],
      close_modal_destroy: true,
      close_modal: false,
      planId: undefined,
      info: undefined
    }
  },
  created() {
    getMyPlanByTime(new Date())
  },
  methods: {
    detailPlan(id) {
      this.visible = true
      this.planId = id
      findPlan(id).then(res => {
        this.info = res.body.data
      })
    },
    getMyPlan(date) {
      date = moment(date).format('YYYY-MM-DD')
      sendMatomo(7,'陪伴匹配', '查询', '查询个人计划，时间：'+date)
      getMyPlanByTime(date).then(res => {
        this.plans = res.body.data
      })
    },
    changeTime(curVal) {
      this.getMyPlan(curVal)
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.planId = undefined
      this.visible = false
      this.getAllPlans()
      this.info = undefined
    },
    cancelPlan(id) {
      cancelPlan(id).then(res => {
        if (res.body.data) {
          this.$message.success("成功取消参与")
          this.changeTime(this.value)
        }
      })
    }
  },
  watch: {
    'value': {
      handler(newName, oldName) {
        this.changeTime(newName)
      }
    }
  }
}
</script>

<style>
.app-container{
  height: 100%;
}
/*left*/
.left-content{
  height: 100%;
  width: 450px;
  float: left;
}
.left-content .left-content-title{
  width: 300px;
  display: block;
}
.left-content .left-content-text{
  width: 750px;
  position: relative;
  padding-top: 20px;
}
.left-content .left-content-text .button{
  position: absolute;
  top: 470px;
  left: 470px;
}
.left-content .left-content-text .x-button{
  position: absolute;
  top: 470px;
  left: 370px;
}
/*right*/
.right-content{
  width: 500px;
  float: left;
  height: 100%;
  padding-left: 50px;
}
</style>

、
